<template>
  <div class="common-layout" style="height: 100%;">
    <el-container style="height: 100%;">
      <el-aside width="200px">
        <!-- <CommonAside></CommonAside> -->
        <el-menu
        active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        default-active="2" text-color="#fff" style="height: 100%;">
        <el-sub-menu :index="form.mid" v-for="item in Menu" :key="item.value">
          <template #title>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item-group>
              <el-menu-item @click="router.push('/'+item1.arress)" v-for="item1 in item.children" :key="item1.value">
            {{ item1.label }}
            </el-menu-item>
        </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <span>请假申请管理</span>
          </template>
          <el-menu-item  @click="router.push('/ExcusedAdd')">请假申请</el-menu-item>
          <el-menu-item  @click="router.push('/ExcusedList')">请假列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <span>溯源管理</span>
          </template>
          <el-menu-item  @click="router.push('/TraceList')">溯源列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <span>手机端商品溯源</span>
          </template>
          <el-menu-item  @click="router.push('/MobileList')">商品溯源</el-menu-item>
        </el-sub-menu>
        </el-menu>

      </el-aside>
      <el-container>
        <el-header 
        style="background-color: #545c64 ; color: #fff ;text-align: center; font-size: 35px;">
            欢迎&nbsp;<span style="color: red;">{{ UserName }}</span>&nbsp;登录
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import {reactive} from 'vue'
const router=useRouter()
const form=reactive({
  mid:1
})
// import CommonAside from '../components/CommonAside.vue'
const UserName=localStorage.getItem("username")
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Menu:any=ref([])
const MenuListx=()=>{
  axios.get('Menu/MenuList',
  ).then(ret => {
    // console.log(ret.data)
    Menu.value=ret.data.data
    // console.log(Menu);
  })
}
onMounted(()=>{
  MenuListx()
})

</script>
